<template>
  <div>
    <component-api class="mt0" :items="props" :descriptions="propsDescs" title="Props"></component-api>
    <!-- <component-api :items="slots" title="Slots"></component-api> -->
    <!-- <component-api :items="events" title="Events"></component-api> -->
  </div>
</template>

<script>
  import WAvatar from "../../../../../src/components/avatar/WAvatar.vue";

  const propsDescs = {
    badge: "Sets avatar badge",
    badgeColor: "Sets avatar's badge color",
    size: "Sets the color of the avatar.",
    src: "the address of the image for an image avatar",
    icon: "set representation type to Icon, more info on Icon Component",
    textColor: "Sets text color",
    iconColor: "Sets icon color",
    text: "Sets avatar text",
    color: "Sets the color of the avatar.",
    xs: "Sets the size of the avatar.",
    sm: "Sets the size of the avatar.",
    md: "Sets the size of the avatar.",
    lg: "Sets the size of the avatar.",
    xl: "Sets the size of the avatar.",

  };

  // const slots = {
  //   content: { description: "The alert content." },
  // };

  const eventsDescs = {
    input:
      "Emitted on alert dismiss/hide.<br>Updates the v-model value in Vue 2.x only.",
    "update:modelValue":
      "Emitted on alert dismiss/hide.<br>Updates the v-model value in Vue 3 only.",
    close: "Emitted on alert dismiss/hide.",
  };

  export default {
    data: () => ({
      propsDescs,
      // slots,
    }),

    computed: {
      // Reads all the props and events directly from the component, so that as soon as a new prop or event
      // is added it will appear even if no description is yet provided.
      props() {
        return WAvatar.props;
      },
      // events() {
      //   return WAvatar.emits.reduce(
      //     (obj, label) =>
      //       (obj[label] = { description: eventsDescs[label] || "" }) && obj,
      //     {}
      //   );
      // },
    },
  };
</script>